<template>
  <a-form
    :model="queryDate"
    @finish="handleFinish"
    @finishFailed="handleFinishFailed"
    layout="inline"
  >
    <a-form-item label="价格区间">
      <a-input-number
        v-model:value="queryDate.minPrice"
        placeholder="起始价格"
        :min="0"
      />
    </a-form-item>
    <a-form-item>
      <a-input-number
        v-model:value="queryDate.maxPrice"
        placeholder="最高价格"
        :min="0"
      />
    </a-form-item>
    <a-form-item>
      <a-select
        v-model:value="queryDate.classesId"
        ref="select"
        placeholder="请选择商品分类"
        style="width: 170px"
      >
        <a-select-option
          v-for="type in classes"
          :key="type.id"
          :value="type.id"
          >{{ type.name }}</a-select-option
        >
      </a-select>
    </a-form-item>
    <a-space>
      <a-button type="primary" html-type="submit"
        ><SearchOutlined /> 搜索
      </a-button>
      <a-button @click="resetForm"><ReloadOutlined /> 重置 </a-button>
    </a-space>
  </a-form>
</template>

<script>
import { onMounted, reactive, ref, toRefs, watch, createVNode } from "vue";
import { reqAllClasses, reqQueryData } from "../../../api";
import { message, Modal } from "ant-design-vue";
import {
  ExclamationCircleOutlined,
  SearchOutlined,
  ReloadOutlined,
} from "@ant-design/icons-vue";

// 商品分类的hooks
function useClasses() {
  const classes = ref([]);
  async function initClasses() {
    const { data } = await reqAllClasses();
    classes.value = data.items;
  }
  onMounted(() => {
    initClasses();
  });
  return {
    classes,
  };
}

// 商品条件的hooks
function useQueryData(updateDataSource, initProductTable) {
  const state = reactive({
    queryDate: {},
  });

  // 监听最大值的改变
  watch(
    () => state.queryDate.maxPrice,
    () => {
      if (!state.queryDate.minPrice) {
        message.warn("起始价格不能为空");
      }
    }
  );

  const handleFinish = () => {
    const { minPrice, maxPrice, classesId } = state.queryDate;
    if (!(minPrice || maxPrice || classesId)) {
      message.warn("搜索条件不能为空");
      return;
    }
    toQueryData();
  };

  // 发送请求查询
  async function toQueryData() {
    console.log(state.queryDate);
    const { data } = await reqQueryData(state.queryDate);
    updateDataSource(data.items);
  }

  const handleFinishFailed = (errors) => {
    console.log(errors);
  };

  // 重置表单和表格
  function resetForm() {
    Modal.confirm({
      title: "确定要重置吗？",
      icon: createVNode(ExclamationCircleOutlined),
      onOk() {
        state.queryDate = {};
        initProductTable();
      },
    });
  }

  return {
    ...toRefs(state),
    handleFinish,
    handleFinishFailed,
    resetForm,
  };
}

export default {
  name: "SearchForm",
  components: {
    ExclamationCircleOutlined,
    SearchOutlined,
    ReloadOutlined,
  },
  props: ["updateDataSource", "initProductTable"],
  setup(props) {
    return {
      ...useQueryData(props.updateDataSource, props.initProductTable),
      ...useClasses(),
    };
  },
};
</script>

<style>
</style>